import { useSelector, useDispatch } from "react-redux";
import { clearDone } from "../store/actions/todos";
const TodoFooter = () => {
  // 未完成任务数量
  const leftCount = useSelector(
    // @ts-ignore
    (state) => state.todos.filter((item) => !item.done).length
  );
  const dispatch = useDispatch();
  // 已完成任务数量
  const completedCount = useSelector(
    // @ts-ignore
    (state) => state.todos.filter((item) => item.done).length
  );
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{leftCount}</strong> item left
      </span>
      <ul className="filters">
        <li>
          <a className="selected" href="#/">
            All
          </a>
        </li>
        <li>
          <a href="#/active">Active</a>
        </li>
        <li>
          <a href="#/completed">Completed</a>
        </li>
      </ul>
      {completedCount > 0 && (
        <button
          className="clear-completed"
          onClick={() => dispatch(clearDone())}
        >
          Clear completed
        </button>
      )}
    </footer>
  );
};

export default TodoFooter;
